<html lang="zh-CN"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>FAQ</title>
<style>

html {
  -webkit-text-size-adjust: none;
  font-size:75%;
  height: 100%; 
}

@media screen and (min-width: 10px) and (max-width: 320px) {
  html {
	font-size: 64%; 
  }
}

@media screen and (min-width: 414px) and (max-width: 768px) {
  html {
	font-size: 82.8%; 
  } 
}

body{
	margin:0;
}

@font-face {
    font-family: Muiicons;
    font-weight: normal;
    font-style: normal;
    src: url('/vr_crm/View/template/font/m.ttf') format('truetype');
}


.accordion-content{
	background-color:#f5f5f9;
	min-height:0;
	overflow:hidden;
	font-size:1.2rem;
	max-height:0;
	box-sizing:border-box;
}
.accordion-title{
	padding:0.7rem 1.4rem;
	background-color:#ffffff;
	position:relative;
	font-size:1.2rem;
	
	
	box-sizing:border-box;
}
.accordion-row{
	border-bottom:1px solid #f2f2f2;

}

.accordion-content-display{
	padding:0.7rem 1.4rem;
}
.accordion-title:after{
	content:'\e583';
	font-family: Muiicons;
    font-size: 1.4rem;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
	position:absolute;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
	right:1.4rem;
	color:#ccc;
	transform:rotate(0);
	transition:transform 200ms;
}
.accordion-row.active > .accordion-title:after{
	transform:rotate(90deg);
}
.accordion-row.active > .accordion-content{
	max-height:none;
}




.accordion-content p{
	margin:0 0 0.8rem 0
}
.accordion-content p:last-child{
	margin:0;
}
</style>
</head>
<body>
	
	<div class="accordion">

		<?php foreach($data as $k=>$v){?>
			<div class="accordion-row">
			
				<div class="accordion-title">
					<?php echo $v["question"]?>
				</div>
				<div class="accordion-content">
					<div class="accordion-content-display">
					<?php echo $v["anwser"]?>
					</div>
				</div>
			</div>
		<?php }?>
		
	</div>
	
	
</body>
</html>

<script>
	function Accordion(el){
		el.querySelectorAll(".accordion-row").accordionInit();
	}
	
	Node.prototype.accordion = function(){
		return new Accordion(this);
	}
	NodeList.prototype.accordion = function(){
		[].slice.call(this,0).map(function(item){
			item.accordion();
		});
	}
	NodeList.prototype.accordionInit = function(){
		[].slice.call(this,0).map(function(item){
			item.querySelector(".accordion-title").addEventListener("touchend",function(){
				if(item.classList.contains("active")){
					item.classList.remove("active");
				}else{
					item.classList.add("active");
				}
			});
		});
	}

	document.querySelectorAll(".accordion").accordion();
</script>
